<template>
    <div>
        <div class="bottom-nav">
            <router-link tag="div" to="/home" class="item">首页</router-link>
            <router-link tag="div" to="/mall" class="item">商城</router-link>  
            <router-link tag="div" to="/live" class="item">直播</router-link>
            <router-link tag="div" to="/user" class="item">我的</router-link>
        </div>
        <div class="occupys"></div>
    </div>
</template>


<style lang="less">
    @height84:84px;
    .bottom-nav{
        height: @height84;
        line-height: @height84;
        position: fixed;
        left: 0px;
        right: 0px;
        bottom: 0px;
        display: flex;
        justify-content: space-around;
        border-top: 1px solid #E2E2E2;
        background: #fff;
        z-index: 999;
        .item{
            font-size: 28px;
            color: #666;
            &.router-link-active{
                color: #FF4466;
            }
        }
    }
    .occupys{
        height: @height84;
    }
</style>
